<template>
  <div class="wdStudioList padding_20">
    <el-input v-model="param.searchCondition"
              placeholder="请输入名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <Select placeholder="输入关键字选择医院"
            clearable
            v-model="param.hospitalId"
            filterable
            remote
            :remote-method="remoteMethod"
            :loading="loading"
            class="w-200"
            @on-clear="handleQuery">
      <Option v-for="(hospital, index) in hospitalList"
              :value="hospital.id"
              :key="index">{{hospital.name}}</Option>
    </Select>
    <el-select v-model="param.isComplete"
               clearable
               class="w-200"
               @change="handleQuery"
               @clear="handleQuery"
               placeholder="请选择">
      <el-option :value=0>完整</el-option>
      <el-option :value=1>不完整</el-option>
    </el-select>
    <Select placeholder="输入关键字选择工作室类别"
            clearable
            v-model="param.typeId"
            filterable
            remote
            :remote-method="remoteMethodTypeId"
            :loading="loading"
            class="w-200">
      <Option v-for="(wdStudioType, index) in wdStudioTypeList"
              :value="wdStudioType.id"
              :key="index">{{wdStudioType.name}}</Option>
    </Select>
    <DatePicker type="date"
                v-model="param.startTime"
                placeholder="起始日期"
                class="datePicker_1"></DatePicker>
    <DatePicker type="date"
                v-model="param.endTime"
                placeholder="截止日期"
                class="datePicker_1"></DatePicker>
    <Button type="primary"
            @click="handleQuery">查 询</Button>
    <Table :columns="tableCol"
           :data="tableData"
           border
           stripe
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="handleView(row)">详 细</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>

  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import { activityMgt } from '@/api/codeName'
  export default {
    name: "wdStudioList",
    data () {
      return {
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '工作室头像',
            key: 'imgUrl',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.imgUrl,
                    preview: 'wdStudioList'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '10px',
                    borderRadius: '50%'
                  }
                }),
              ]);
            }
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '工作室类别',
            key: 'typeName'
          },
          {
            title: '责任医生',
            key: 'nickName',
            render: (h, params) => {
              return h('span', params.row.doctorDto.nickName);
            }
          },
          {
            title: '医院',
            key: 'hospitalName',
            render: (h, params) => {
              return h('span', params.row.doctorDto.hospitalName);
            }
          },
          {
            title: '是否完整',
            key: 'isComplete',
            render: (h, params) => {
              if (params.row.isComplete == '0') {
                return h('span', '否');
              } else {
                return h('span', '是');
              }
            }
          },
          {
            title: '二维码',
            key: 'qrCodeUrl',
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.qrCodeUrl,
                    preview: 'wdStudioList'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '10px',
                  }
                }),
              ]);
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        wdStudioTypeList: [],
        hospitalList: [],
        loading: false,
        param: {
          hospitalId: '',
          searchCondition: '',
          isComplete: '',
          typeId: '',
          startTime: '',
          endTime: ''
        }
      }
    },
    mounted () {
      if (this.params.wdStudio) {
        this.param = this.params.wdStudio
      } else {
        this.$store.commit('SET_PARAMS', { wdStudio: this.param })
      }
      this._getList()
    },
    methods: {
      remoteMethodTypeId (query) {
        if (query !== '') {
          this.loading = true;
          this.ajax({
            type: this.api.wdStudioTypeList.type,
            url: this.api.wdStudioTypeList.url,
            data: {
              pageSize: 20,
              pageStart: 0,
              searchCondition: query
            },
            success: (data) => {
              this.wdStudioTypeList = data.object
            },
            error: (data) => {
              this.$Message.error(data.message);
            }
          })
        } else {
          this.wdStudioTypeList = [];
        }
        this.loading = false;
      },
      remoteMethod (query) {
        if (query !== '') {
          this.loading = true;
          this.ajax({
            type: 'post',
            url: this.api.searchHospital,
            data: {
              pageSize: 20,
              pageStart: 0,
              name: query
            },
            success: (data) => {
              this.hospitalList = data.object
            },
            error: (data) => {
              this.$Message.error(data.message);
            }
          })
        } else {
          this.hospitalList = [];
        }
        this.loading = false;
      },
      handleQuery () {
        this.page.pageIndex=0
        this._getList()
      },
      handleView (row) {
        this.$router.push({ name: 'wdStudioView', query: { id: row.id } })
      },
      _getList () {
        this.ajax({
          type: this.api.wdStudioList.type,
          url: this.api.wdStudioList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object
            this.pageTotal = data.totalNum
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .wdStudioList {
  }
</style>
